<template>
  <div class="system-home">
    <div class="system-home__goback" @click="goBack">
      <img src="@/assets/menuIcon/greenBack.svg" alt="" />
      <span>返回上级</span>
    </div>
    <div class="system-home__menu">
      <div
        class="menu__item"
        v-for="item in secondMenu"
        :key="item.id"
        :style="{
          backgroundColor: item.color,
          width: `calc(${width} / ${Math.min(4, secondMenu.length)})`,
          height: `calc(${width} / ${Math.min(4, secondMenu.length)})`
        }"
        @click="navMenuGoPath(router, item)"
      >
        <img :src="setSrc(item.icon)" alt="" />
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  NavMenuItem,
  navMenuGoPath,
  getTopLevelMenu
} from '@/config/navigationMenu'

defineOptions({
  name: 'SystemHomeSecond'
})

const width = '64vw'

const route = useRoute()
const router = useRouter()

const secondMenu = computed<NavMenuItem[]>(
  () => getTopLevelMenu(Number(route.query.id))?.children || []
)

const goBack = () => {
  router.push('/')
}

// 引入图标
const setSrc = (name?: string) => {
  return new URL(`../../../assets/menuIcon/${name}.svg`, import.meta.url).href
}
</script>

<style lang="scss" scoped>
.system-home {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url('../../../assets/imgs/home-bg.jpg');
  background-size: 100% 100%;
  &__goback {
    transform: translateY(-90px);
    width: v-bind(width);
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30px;
    font-size: 38px;
    font-weight: 700;
    color: #198b5c;
    cursor: pointer;
    img {
      width: 55px;
      height: 55px;
    }
  }
  &__menu {
    transform: translateY(-90px);
    display: flex;
    flex-wrap: wrap;
    width: v-bind(width);
  }
  .menu__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 500px;
    max-height: 500px;
    font-size: 38px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    img {
      width: 6vw;
      height: 6vw;
      margin-bottom: 20px;
    }
    box-sizing: border-box;
    border: 1px solid #ffffff;
  }
}
</style>
